<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>adddragupEvent</title>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
    </head>
    <link rel="stylesheet" type="text/css" href="../../css/reset.css">
    <script src="../../script/libs/jquery-1.9.1.min.js"></script>
    <script>
        var res = ['adddragupEvent'];
        var html = [];
        var timestamp = Date.parse(new Date());
        for(s in res){
            html.push('<script type="text/javascript" src="../../script/componets/'+res[s]+'.js?v='+timestamp+'"><\/script>');
        }
        document.write(html.join(''));
    </script>
    <style type="text/css">
    body{
    width: 100%;
    }
    .loadingUl{
    width: 100%;
    }
    .loadingUl li{
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #0f88eb;
    color: #fff;
    border-bottom:1px solid #fff;
    }
    .loadMask{
    text-align: center;
    height: 30px;
    line-height: 30px;
    display: none
    }
    </style>
    <body>
        <ul class="loadingUl">
            <li>item01</li>
            <li>item02</li>
            <li>item03</li>
            <li>item04</li>
            <li>item05</li>
            <li>item06</li>
            <li>item07</li>
            <li>item08</li>
            <li>item09</li>
            <li>item10</li>
        </ul>
        <div class="loadMask">loading......</div>
        <script type="text/javascript">

        var loadingUl   = $(".loadingUl"),
            loadMask    = $(".loadMask"),
            log         = console.log.bind(console),
            isload      = true,
            winHeight   = $(window).height(),
            ajaxhtml    = ` <li>item01</li>
                            <li>item02</li>
                            <li>item03</li>
                            <li>item04</li>
                            <li>item05</li>
                            <li>item06</li>`;

        Yeffect.adddragupEvent(function(){
            if(!isload) return;
            isload=false;
            loadMask.show();
            setTimeout(function(){
                loadMask.hide();
                loadingUl.append(ajaxhtml);
                isload=true;
            },1000)
        },winHeight)
        </script>
    </body>
</html>
